<template>
    <div class="auth">
        <div class="child" style="margin-right: 10px;">
            门权限
            <vxe-table style="overflow: auto;" 
                    border
                    resizable
                    show-overflow
                    ref="xTable1"
                    height="400"
                    :data="tableData1"
                    >
                    <vxe-table-column field="doorNo"  title="门编号"></vxe-table-column>
                    <vxe-table-column field="doorName"  title="门名称"></vxe-table-column>
                    <vxe-table-column field="doorArea"  title="区域" ></vxe-table-column>
            </vxe-table>
            <vxe-pager
                :current-page="tablePage1.page"
                :page-size="tablePage1.size"
                :total="tablePage1.totalElements"
                background
                @page-change="handlePageChange1"
            >
            </vxe-pager>
        </div>
        <div class="child">
            电梯权限
            <vxe-table style="overflow: auto;"
                    border
                    resizable
                    show-overflow
                    ref="xTable1"
                    height="400"
                    :data="tableData2"
                    >
                    <vxe-table-column field="elevatorNo"  title="电梯编号" ></vxe-table-column>
                    <vxe-table-column field="elevatorName"  title="电梯名称"></vxe-table-column>
                    <vxe-table-column field="floorCount"  title="楼层数"></vxe-table-column>
                    <vxe-table-column field="floors" width="150"  title="楼层"></vxe-table-column>
            </vxe-table>
            <vxe-pager
                :current-page="tablePage2.page"
                :page-size="tablePage2.size"
                :total="tablePage2.totalElements"
                background
                @page-change="handlePageChange2"
            >
            </vxe-pager>
        </div>
    </div>
</template>

<script>
import userApi from '@/api/accessControl/user';
import deptApi from '@/api/accessControl/dept';
export default {
    name: 'authority',
    props: {
        id: Object
    },
    data() {
        return {
            tablePage1: {
                total: 0,
                page: 1,
                size: 10,
                background: true,
                totalElements: 0
            },
            tablePage2: {
                total: 0,
                page: 1,
                size: 10,
                background: true,
                totalElements: 0
            },
            tableData1: [],
            tableData2: []
        }
    },
    mounted() {
        // this.getlistLeft();
        // this.getlistRight();
    },
    methods: {
        getlistLeft() {
            const params = {
                page: this.tablePage1.page,
                size: this.tablePage1.size,
                userId: this.id.userId,
                deptId: this.id.deptId
            }
            var api = this.id.userId ? userApi:deptApi;
            api.getlistLeft(params).then(res =>{
                this.tableData1 = res.content;
                this.tablePage1.totalElements = res.totalElements;
            });
        },
        getlistRight() {
            const params = {
                page: this.tablePage2.page,
                size: this.tablePage2.size,
                userId: this.id.userId,
                deptId: this.id.deptId
            }
            var api = this.id.userId ? userApi:deptApi;
            api.getlistRight(params).then(res =>{
                this.tableData2 = res.content;
                this.tablePage2.totalElements = res.totalElements;
            });
        },
        handlePageChange1({currentPage, pageSize}) {
            this.tablePage1.page = currentPage;
            this.tablePage1.size = pageSize;
            this.getlistLeft();
        },
        handlePageChange2({currentPage, pageSize}) {
            this.tablePage2.page = currentPage;
            this.tablePage2.size = pageSize;
            this.getlistRight();
        },
    }
}
</script>

<style lang="scss">
    .auth{
        display: flex;
        overflow: auto;
        .child{
            display: flex;
			flex: 1;
			flex-direction: column;
			text-align: center;
        }
    }
</style>